<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 记得更换vue文件 -->
    <script src="../static/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .seat {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: aqua;
        }
        .seat .seat-beizhan {
            background-color: brown;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="text" id="text" v-model="id" />
    <button @click="setSeats">查询</button>
    <div
            id="jiaoshi"
            style="width: 600px; height: 600px; background-color: cornflowerblue"
    ></div>
</div>

<script>
    function Trim(str) {
        return str.replace(/(^\s*)|(\s*$)/g, "");
    }
    var app = new Vue({
        el: "#app",
        data: {
            id: "",
            seats: "",
            test: "",
        },
        methods: {
            findSeats(id) {
                if (id == 0) {
                    return;
                }
                let _this = this;
                axios
                    .get("http://localhost:8081/seat/getSeats", {
                        params: {
                            id: id,
                        },
                    })
                    .then(function (resp) {
                        _this.seats = resp.data;
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            },
            creatSeat() {
                let _this = this;
                console.log("seats type" + typeof _this.seats);
                if (_this.seats == "") {
                    return;
                }
                const seats = JSON.parse(_this.seats);
                console.log("seats" + seats);
                // console.log(seats[1]);
                const jiaoshi = document.querySelector("#jiaoshi");
                // 清除所有子元素
                // var childNodes = jiaoshi.classList;
                // for (const key in childNodes) {
                //   jiaoshi.removeChild(childNodes[key]);
                // }

                for (const key in seats) {
                    //  可用
                    console.log(seats[key]);
                    const seatDiv = document.createElement("div");
                    seatDiv.setAttribute("class", "seat");
                    seatDiv.style.left = seats[key].X * 20 + "px";
                    seatDiv.style.top = seats[key].Y * 20 + "px";
                    jiaoshi.appendChild(seatDiv);
                }
            },
            setSeats() {
                let _this = this;
                console.log(_this.id);
            },
        },
        created() {
            this.findSeats(1);
        },
        mounted() {
            setTimeout(() => {
                this.creatSeat(); //这里就写你要执行的语句即可，先让数据库的数据加载进去数组中你在从数组中取值就好了
            }, 800);
        },
        updated() {
            console.log("updated函数调用");
            this.findSeats(this.id);
            setTimeout(() => {
                this.creatSeat(); //这里执行
            }, 800);
        },
    });
</script>
</body>
</html>
